<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"> <style>
	.KEYW {color: #933;}
	.COMM {color: #bbb; font-style: italic;}
	.NUMB {color: #393;}
	.STRN {color: #393;}
	.REGX {color: #339;}
	.line {border-right: 1px dotted #666; color: #666; font-style: normal;}
	</style></head><body><pre><span class='line'>  1</span> <span class="COMM">/**
<span class='line'>  2</span>  * Hilo
<span class='line'>  3</span>  * Copyright 2015 alibaba.com
<span class='line'>  4</span>  * Licensed under the MIT License
<span class='line'>  5</span>  */</span><span class="WHIT">
<span class='line'>  6</span> 
<span class='line'>  7</span> </span><span class="COMM">/**
<span class='line'>  8</span>  * Demo:
<span class='line'>  9</span>  * &lt;pre>
<span class='line'> 10</span>  * var stage = new Hilo.Stage({
<span class='line'> 11</span>  *     renderType:'canvas',
<span class='line'> 12</span>  *     container: containerElement,
<span class='line'> 13</span>  *     width: 320,
<span class='line'> 14</span>  *     height: 480
<span class='line'> 15</span>  * });
<span class='line'> 16</span>  * &lt;/pre>
<span class='line'> 17</span>  * @class Stage is the root of all visual object tree, any visual object will be render only after being added to Stage or any children elements of Stage. Normally, every hilo application start with an stage instance.
<span class='line'> 18</span>  * @augments Container
<span class='line'> 19</span>  * @param {Object} properties Properties parameters for the object. Includes all writable properties of this class. Some important like:
<span class='line'> 20</span>  * &lt;ul>
<span class='line'> 21</span>  * &lt;li>&lt;b>container&lt;/b>:String|HTMLElement - Assign the parent container element of the Stage in the page. It should be a dom container or an id. If this parameter is not given and canvas isn't in the dom tree, you should add the stage vanvas into the dom tree yourself, otherwise Stage will not render. optional.&lt;/li>
<span class='line'> 22</span>  * &lt;li>&lt;b>renderType&lt;/b>:String - Renering way: canvas|dom|webgl，default value is canvas, optional.&lt;/li>
<span class='line'> 23</span>  * &lt;li>&lt;b>canvas&lt;/b>:String|HTMLCanvasElement|HTMLElement - 指定舞台所对应的画布元素。它是一个canvas或普通的div，也可以传入元素的id。若为canvas，则使用canvas来渲染所有对象，否则使用dom+css来渲染。可选。&lt;/li>
<span class='line'> 24</span>  * &lt;li>&lt;b>width&lt;/b>:Number&lt;/li> - The width of the Stage, default value is the width of canvas, optional.
<span class='line'> 25</span>  * &lt;li>&lt;b>height&lt;/b>:Number&lt;/li> - The height of the Stage, default value is the height of canvas, optional.
<span class='line'> 26</span>  * &lt;li>&lt;b>paused&lt;/b>:Boolean&lt;/li> - Whether stop rendering the Stage, default value is false, optional.
<span class='line'> 27</span>  * &lt;/ul>
<span class='line'> 28</span>  * @module hilo/view/Stage
<span class='line'> 29</span>  * @requires hilo/core/Hilo
<span class='line'> 30</span>  * @requires hilo/core/Class
<span class='line'> 31</span>  * @requires hilo/view/Container
<span class='line'> 32</span>  * @requires hilo/renderer/CanvasRenderer
<span class='line'> 33</span>  * @requires hilo/renderer/DOMRenderer
<span class='line'> 34</span>  * @requires hilo/renderer/WebGLRenderer
<span class='line'> 35</span>  * @requires hilo/util/browser
<span class='line'> 36</span>  * @requires hilo/util/util
<span class='line'> 37</span>  * @property {HTMLCanvasElement|HTMLElement} canvas The canvas the Stage is related to. It can be a canvas or a div element, readonly!
<span class='line'> 38</span>  * @property {Renderer} renderer Stage renderer, readonly!
<span class='line'> 39</span>  * @property {Boolean} paused Paused Stage rendering.
<span class='line'> 40</span>  * @property {Object} viewport Rendering area of the Stage. Including properties like: left, top, width, height. readonly!
<span class='line'> 41</span>  */</span><span class="WHIT">
<span class='line'> 42</span> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">Stage</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">Class.create</span><span class="PUNC">(</span><span class="COMM">/** @lends Stage.prototype */</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 43</span> </span><span class="WHIT">    </span><span class="NAME">Extends</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">Container</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'> 44</span> </span><span class="WHIT">    </span><span class="NAME">constructor</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">properties</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 45</span> </span><span class="WHIT">        </span><span class="NAME">properties</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">properties</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 46</span> </span><span class="WHIT">        </span><span class="NAME">this.id</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.id</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">properties.id</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">Hilo.getUid</span><span class="PUNC">(</span><span class="STRN">'Stage'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 47</span> </span><span class="WHIT">        </span><span class="NAME">Stage.superclass.constructor.call</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">properties</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 48</span> 
<span class='line'> 49</span> </span><span class="WHIT">        </span><span class="NAME">this._initRenderer</span><span class="PUNC">(</span><span class="NAME">properties</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 50</span> 
<span class='line'> 51</span> </span><span class="WHIT">        </span><span class="COMM">//init size</span><span class="WHIT">
<span class='line'> 52</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.width</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.height</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'> 53</span> </span><span class="WHIT">            </span><span class="NAME">viewport</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.updateViewport</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 54</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">properties.width</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="NAME">width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">viewport</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">viewport.width</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NUMB">320</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 55</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">properties.height</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="NAME">height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">viewport</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">viewport.height</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NUMB">480</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 56</span> </span><span class="WHIT">        </span><span class="NAME">this.resize</span><span class="PUNC">(</span><span class="NAME">width</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">height</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 57</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'> 58</span> 
<span class='line'> 59</span> </span><span class="WHIT">    </span><span class="NAME">canvas</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'> 60</span> </span><span class="WHIT">    </span><span class="NAME">renderer</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'> 61</span> </span><span class="WHIT">    </span><span class="NAME">paused</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'> 62</span> </span><span class="WHIT">    </span><span class="NAME">viewport</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'> 63</span> 
<span class='line'> 64</span> </span><span class="WHIT">    </span><span class="COMM">/**
<span class='line'> 65</span>      * @private
<span class='line'> 66</span>      */</span><span class="WHIT">
<span class='line'> 67</span> </span><span class="WHIT">    </span><span class="NAME">_initRenderer</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">properties</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 68</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">canvas</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">properties.canvas</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 69</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">container</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">properties.container</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 70</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">renderType</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">properties.renderType</span><span class="PUNC">||</span><span class="STRN">'canvas'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 71</span> 
<span class='line'> 72</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="KEYW">typeof</span><span class="WHIT"> </span><span class="NAME">canvas</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="STRN">'string'</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="NAME">canvas</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">Hilo.getElement</span><span class="PUNC">(</span><span class="NAME">canvas</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 73</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="KEYW">typeof</span><span class="WHIT"> </span><span class="NAME">container</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="STRN">'string'</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="NAME">container</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">Hilo.getElement</span><span class="PUNC">(</span><span class="NAME">container</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 74</span> 
<span class='line'> 75</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">canvas</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 76</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">canvasTagName</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">renderType</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="STRN">'dom'</span><span class="PUNC">?</span><span class="STRN">'div'</span><span class="PUNC">:</span><span class="STRN">'canvas'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 77</span> </span><span class="WHIT">            </span><span class="NAME">canvas</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">Hilo.createElement</span><span class="PUNC">(</span><span class="NAME">canvasTagName</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 78</span> </span><span class="WHIT">                </span><span class="NAME">style</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 79</span> </span><span class="WHIT">                    </span><span class="NAME">position</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="STRN">'absolute'</span><span class="WHIT">
<span class='line'> 80</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 81</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 82</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 83</span> </span><span class="WHIT">        </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">canvas.getContext</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 84</span> </span><span class="WHIT">            </span><span class="NAME">renderType</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">'dom'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 85</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 86</span> 
<span class='line'> 87</span> </span><span class="WHIT">        </span><span class="NAME">this.canvas</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">canvas</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 88</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="NAME">container</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="NAME">container.appendChild</span><span class="PUNC">(</span><span class="NAME">canvas</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 89</span> 
<span class='line'> 90</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">props</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="NAME">canvas</span><span class="PUNC">:</span><span class="NAME">canvas</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">stage</span><span class="PUNC">:</span><span class="KEYW">this</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 91</span> </span><span class="WHIT">        </span><span class="KEYW">switch</span><span class="PUNC">(</span><span class="NAME">renderType</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 92</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="STRN">'dom'</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'> 93</span> </span><span class="WHIT">                </span><span class="NAME">this.renderer</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">DOMRenderer</span><span class="PUNC">(</span><span class="NAME">props</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 94</span> </span><span class="WHIT">                </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 95</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="STRN">'webgl'</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'> 96</span> </span><span class="WHIT">                </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="NAME">WebGLRenderer.isSupport</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 97</span> </span><span class="WHIT">                    </span><span class="NAME">this.renderer</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">WebGLRenderer</span><span class="PUNC">(</span><span class="NAME">props</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 98</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 99</span> </span><span class="WHIT">                </span><span class="KEYW">else</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>100</span> </span><span class="WHIT">                    </span><span class="NAME">this.renderer</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">CanvasRenderer</span><span class="PUNC">(</span><span class="NAME">props</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>101</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>102</span> </span><span class="WHIT">                </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>103</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="STRN">'canvas'</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>104</span> </span><span class="WHIT">	        </span><span class="COMM">/* falls through */</span><span class="WHIT">
<span class='line'>105</span> </span><span class="WHIT">            </span><span class="KEYW">default</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>106</span> </span><span class="WHIT">                </span><span class="NAME">this.renderer</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">CanvasRenderer</span><span class="PUNC">(</span><span class="NAME">props</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>107</span> </span><span class="WHIT">                </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>108</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>109</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>110</span> 
<span class='line'>111</span> </span><span class="WHIT">    </span><span class="COMM">/**
<span class='line'>112</span>      * Add Stage canvas to DOM container. Note: this function overwrite View.addTo function.
<span class='line'>113</span>      * @param {HTMLElement} domElement An dom element.
<span class='line'>114</span>      * @returns {Stage} The Stage Object, chained call supported.
<span class='line'>115</span>      */</span><span class="WHIT">
<span class='line'>116</span> </span><span class="WHIT">    </span><span class="NAME">addTo</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">domElement</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>117</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">canvas</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.canvas</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>118</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="NAME">canvas.parentNode</span><span class="WHIT"> </span><span class="PUNC">!==</span><span class="WHIT"> </span><span class="NAME">domElement</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>119</span> </span><span class="WHIT">            </span><span class="NAME">domElement.appendChild</span><span class="PUNC">(</span><span class="NAME">canvas</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>120</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>121</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">this</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>122</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>123</span> 
<span class='line'>124</span> </span><span class="WHIT">    </span><span class="COMM">/**
<span class='line'>125</span>      * Invoke tick function and Stage will update and render. Developer may not need to use this funciton.
<span class='line'>126</span>      * @param {Number} delta The time had pass between this tick invoke and last tick invoke.
<span class='line'>127</span>      */</span><span class="WHIT">
<span class='line'>128</span> </span><span class="WHIT">    </span><span class="NAME">tick</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">delta</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>129</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">this.paused</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>130</span> </span><span class="WHIT">            </span><span class="NAME">this._render</span><span class="PUNC">(</span><span class="NAME">this.renderer</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">delta</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>131</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>132</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>133</span> 
<span class='line'>134</span> </span><span class="WHIT">    </span><span class="COMM">/**
<span class='line'>135</span>      * Turn on/off Stage response to DOM event. To make visual objects on the Stage interactive, use this function to turn on Stage's responses to events.
<span class='line'>136</span>      * @param {String|Array} type The event name or array that need to turn on/off.
<span class='line'>137</span>      * @param {Boolean} enabled Whether turn on or off the response method of stage DOM event. If not provided, default value is true.
<span class='line'>138</span>      * @returns {Stage} The Stage Object, chained call supported.
<span class='line'>139</span>      */</span><span class="WHIT">
<span class='line'>140</span> </span><span class="WHIT">    </span><span class="NAME">enableDOMEvent</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">types</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">enabled</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>141</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">me</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">this</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>142</span> </span><span class="WHIT">            </span><span class="NAME">canvas</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">me.canvas</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>143</span> </span><span class="WHIT">            </span><span class="NAME">handler</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">me._domListener</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">me._domListener</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">e</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="NAME">me._onDOMEvent</span><span class="PUNC">(</span><span class="NAME">e</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>144</span> 
<span class='line'>145</span> </span><span class="WHIT">        </span><span class="NAME">types</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">typeof</span><span class="WHIT"> </span><span class="NAME">types</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="STRN">'string'</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="NAME">types</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">types</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>146</span> </span><span class="WHIT">        </span><span class="NAME">enabled</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">enabled</span><span class="WHIT"> </span><span class="PUNC">!==</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>147</span> 
<span class='line'>148</span> </span><span class="WHIT">        </span><span class="KEYW">for</span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">types.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>149</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">type</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">types</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>150</span> 
<span class='line'>151</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="NAME">enabled</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>152</span> </span><span class="WHIT">                </span><span class="NAME">canvas.addEventListener</span><span class="PUNC">(</span><span class="NAME">type</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">handler</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>153</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="KEYW">else</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>154</span> </span><span class="WHIT">                </span><span class="NAME">canvas.removeEventListener</span><span class="PUNC">(</span><span class="NAME">type</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">handler</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>155</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>156</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>157</span> 
<span class='line'>158</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">me</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>159</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>160</span> 
<span class='line'>161</span> </span><span class="WHIT">    </span><span class="COMM">/**
<span class='line'>162</span>      * DOM events handler function. This funciton will invoke events onto the visual object, which is on the position of the coordinate where the events is invoked.
<span class='line'>163</span>      * @private
<span class='line'>164</span>      */</span><span class="WHIT">
<span class='line'>165</span> </span><span class="WHIT">    </span><span class="NAME">_onDOMEvent</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">e</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>166</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">type</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">e.type</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">event</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">e</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">isTouch</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">type.indexOf</span><span class="PUNC">(</span><span class="STRN">'touch'</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>167</span> 
<span class='line'>168</span> </span><span class="WHIT">        </span><span class="COMM">//calculate stageX/stageY</span><span class="WHIT">
<span class='line'>169</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">posObj</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">e</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>170</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="NAME">isTouch</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>171</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">touches</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">e.touches</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">changedTouches</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">e.changedTouches</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>172</span> </span><span class="WHIT">            </span><span class="NAME">posObj</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">touches</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">touches.length</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">touches</span><span class="PUNC">[</span><span class="NUMB">0</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>173</span> </span><span class="WHIT">                     </span><span class="PUNC">(</span><span class="NAME">changedTouches</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">changedTouches.length</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">changedTouches</span><span class="PUNC">[</span><span class="NUMB">0</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>174</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>175</span> 
<span class='line'>176</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">x</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">posObj.pageX</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">posObj.clientX</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">y</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">posObj.pageY</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">posObj.clientY</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>177</span> </span><span class="WHIT">            </span><span class="NAME">viewport</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.viewport</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">this.updateViewport</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>178</span> 
<span class='line'>179</span> </span><span class="WHIT">        </span><span class="NAME">event.stageX</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">x</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">x</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">viewport.left</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NAME">this.scaleX</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>180</span> </span><span class="WHIT">        </span><span class="NAME">event.stageY</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">y</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">y</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">viewport.top</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NAME">this.scaleY</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>181</span> 
<span class='line'>182</span> </span><span class="WHIT">        </span><span class="COMM">//鼠标事件需要阻止冒泡方法 Prevent bubbling on mouse events.</span><span class="WHIT">
<span class='line'>183</span> </span><span class="WHIT">        </span><span class="NAME">event.stopPropagation</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>184</span> </span><span class="WHIT">            </span><span class="NAME">this._stopPropagationed</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>185</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>186</span> 
<span class='line'>187</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">obj</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.getViewAtPoint</span><span class="PUNC">(</span><span class="NAME">x</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">y</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">)</span><span class="PUNC">||</span><span class="KEYW">this</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>188</span> </span><span class="WHIT">            </span><span class="NAME">canvas</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.canvas</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">target</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this._eventTarget</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>189</span> 
<span class='line'>190</span> </span><span class="WHIT">        </span><span class="COMM">//fire mouseout/touchout event for last event target</span><span class="WHIT">
<span class='line'>191</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">leave</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">type</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="STRN">'mouseout'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>192</span> </span><span class="WHIT">        </span><span class="COMM">//当obj和target不同 且obj不是target的子元素时才触发out事件 fire out event when obj and target isn't the same as well as obj is not a child element to target.</span><span class="WHIT">
<span class='line'>193</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="NAME">target</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">target</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">obj</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">target.contains</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">!</span><span class="NAME">target.contains</span><span class="PUNC">(</span><span class="NAME">obj</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">leave</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>194</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">out</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">type</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="STRN">'touchmove'</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="STRN">'touchout'</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>195</span> </span><span class="WHIT">                      </span><span class="PUNC">(</span><span class="NAME">type</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="STRN">'mousemove'</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">leave</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">!</span><span class="NAME">obj</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="STRN">'mouseout'</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>196</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="NAME">out</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>197</span> </span><span class="WHIT">                </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">outEvent</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">util.copy</span><span class="PUNC">(</span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>198</span> </span><span class="WHIT">                </span><span class="NAME">outEvent.type</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">out</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>199</span> </span><span class="WHIT">                </span><span class="NAME">outEvent.eventTarget</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">target</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>200</span> </span><span class="WHIT">                </span><span class="NAME">target._fireMouseEvent</span><span class="PUNC">(</span><span class="NAME">outEvent</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>201</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>202</span> </span><span class="WHIT">            </span><span class="NAME">event.lastEventTarget</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">target</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>203</span> </span><span class="WHIT">            </span><span class="NAME">this._eventTarget</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>204</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>205</span> 
<span class='line'>206</span> </span><span class="WHIT">        </span><span class="COMM">//fire event for current view</span><span class="WHIT">
<span class='line'>207</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="NAME">obj</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">obj.pointerEnabled</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">type</span><span class="WHIT"> </span><span class="PUNC">!==</span><span class="WHIT"> </span><span class="STRN">'mouseout'</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>208</span> </span><span class="WHIT">            </span><span class="NAME">event.eventTarget</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this._eventTarget</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">obj</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>209</span> </span><span class="WHIT">            </span><span class="NAME">obj._fireMouseEvent</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>210</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>211</span> 
<span class='line'>212</span> </span><span class="WHIT">        </span><span class="COMM">//set cursor for current view</span><span class="WHIT">
<span class='line'>213</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">isTouch</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>214</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">cursor</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">obj</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">obj.pointerEnabled</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">obj.useHandCursor</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="STRN">'pointer'</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="STRN">''</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>215</span> </span><span class="WHIT">            </span><span class="NAME">canvas.style.cursor</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">cursor</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>216</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>217</span> 
<span class='line'>218</span> </span><span class="WHIT">        </span><span class="COMM">//fix android: `touchmove` fires only once</span><span class="WHIT">
<span class='line'>219</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="NAME">browser.android</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">type</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="STRN">'touchmove'</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>220</span> </span><span class="WHIT">            </span><span class="NAME">e.preventDefault</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>221</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>222</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>223</span> 
<span class='line'>224</span> </span><span class="WHIT">    </span><span class="COMM">/**
<span class='line'>225</span>      * Update the viewport (rendering area) which Stage show on the page. Invoke this function to update viewport when Stage canvas changes border, margin or padding properties.
<span class='line'>226</span>      * @returns {Object} The visible area of the Stage (the viewport property).
<span class='line'>227</span>      */</span><span class="WHIT">
<span class='line'>228</span> </span><span class="WHIT">    </span><span class="NAME">updateViewport</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>229</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">canvas</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.canvas</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">viewport</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>230</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="NAME">canvas.parentNode</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>231</span> </span><span class="WHIT">            </span><span class="NAME">viewport</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.viewport</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">Hilo.getElementRect</span><span class="PUNC">(</span><span class="NAME">canvas</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>232</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>233</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">viewport</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>234</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>235</span> 
<span class='line'>236</span> </span><span class="WHIT">    </span><span class="COMM">/**
<span class='line'>237</span>      * Resize the Stage.
<span class='line'>238</span>      * @param {Number} width The width of the new Stage.
<span class='line'>239</span>      * @param {Number} height The height of the new Stage.
<span class='line'>240</span>      * @param {Boolean} forceResize Whether forced to resize the Stage, means no matter the size of the Stage, force to change the size to keep Stage, canvas and window act at the same time.
<span class='line'>241</span>      */</span><span class="WHIT">
<span class='line'>242</span> </span><span class="WHIT">    </span><span class="NAME">resize</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">width</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">height</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">forceResize</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>243</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="NAME">forceResize</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">this.width</span><span class="WHIT"> </span><span class="PUNC">!==</span><span class="WHIT"> </span><span class="NAME">width</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">this.height</span><span class="WHIT"> </span><span class="PUNC">!==</span><span class="WHIT"> </span><span class="NAME">height</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>244</span> </span><span class="WHIT">            </span><span class="NAME">this.width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">width</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>245</span> </span><span class="WHIT">            </span><span class="NAME">this.height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">height</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>246</span> </span><span class="WHIT">            </span><span class="NAME">this.renderer.resize</span><span class="PUNC">(</span><span class="NAME">width</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">height</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>247</span> </span><span class="WHIT">            </span><span class="NAME">this.updateViewport</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>248</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>249</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>250</span> 
<span class='line'>251</span> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>252</span> </span></pre></body></html>